<template>
<view class="service-content">
	<scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
		<text
			class="service-list-text" 
			v-for="(item, index) in tablist" 
			:key={index}
			:class="{active: tablistNumber === index}"
			@tap="checkServiceTab(index)"
		>
	  	
			{{item["name"]}}
		</text>
	</scroll-view>
	
	<view class="service-list">
		<view 
			class="service-list-inner" 
			v-for="(item, index) in serviceList"
			:key="item.title"
			@tap="checkService(index)"
		>
			<view class="service-list-inner-left">
				<image :src="`${prefix_image}/homepage/IntegralRecord/activityCheckInBg.png`" mode="aspectFill"/>
			</view>
			<view class="service-list-inner-center">
				<text class="service-list-inner-center1">[猫咪绝育]母猫绝育（呼吸麻醉）[猫咪绝育]母猫绝育（呼吸麻醉）</text>
				<text class="service-list-inner-center2">￥68</text>
			</view>
			<view class="service-list-inner-right" v-if="!item.isSelect">
				<image :src="`${prefix_image}/homepage/IntegralRecord/unSelect.png`" mode="aspectFill"/>
			</view>
			<view class="service-list-inner-right" v-else>
				<image :src="`${prefix_image}/homepage/IntegralRecord/selected.png`" mode="aspectFill"/>
			</view>
		</view>
	</view>
	
	<view class="service-bottom">
		<view class="service-bottom-left">
			<image :src="`${prefix_image}/homepage/IntegralRecord/shop-cart.png`" />
			<text class="service-bottom-left-text1">
				合计<text class="service-bottom-left-text2">1</text>项服务
			</text>
		</view>
		<view class="service-bottom-button" @tap="gotoSelectDoctor()">
			选好了
		</view>
	</view>
</view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue"
import config from '@/hooks/useConfig.js'
export default defineComponent({
	props: {
		isOnline: String
	},
	setup(props) {
		const { prefix_image }=config()
		const data = reactive({
			tablist: [
				{
					name: "全部"
				},
				{
					name: "绝育"
				},
				{
					name: "疫苗"
				},
				{
					name: "体检"
				},
				{
					name: "驱虫"
				},
				{
					name: "洗澡"
				},
				{
					name: "洗澡2"
				},
			],
			tablistNumber: 0,
			
			serviceList: [
				{
					title: "[猫咪绝育]母猫绝育（呼吸麻醉）",
					price: "￥199"
				},
				{
					title: "[猫咪绝育]母猫绝育（呼吸麻醉）",
					price: "￥299"
				}
			],
			// isOnline: props.isOnline=== "true" ? true : false
		})
		
		// 选择服务项目
		const checkService = (index) => {
			data.serviceList[index].isSelect = !data.serviceList[index].isSelect   
			
		}
		
		// 选择服务项目tab 
		const checkServiceTab = (index) => {
			data.tablistNumber = index
		}
		
		// 跳转选择医师
		const gotoSelectDoctor = () => {
			uni.navigateTo({
				url:'/pages/selectDoctor/index?isOnline=true',
			})
		}		
		
		return {
			...toRefs(data),
			checkService,
			checkServiceTab,
			gotoSelectDoctor,
			prefix_image
		}
	}
})
</script>

<style lang="stylus" scoped>
.scroll-view_H{
  white-space: nowrap;
  border-bottom: 1rpx solid rgba(0,0,0, 0.08);
  height: 108rpx;
  padding: 46rpx 32rpx 0rpx 32rpx;
  box-sizing: border-box;
  .service-list-text{
	  width: 60rpx;
	  margin-left: 64rpx;
	  font-size: 30rpx;
	  font-weight: 400;
	  color: #666666;
	  height: 108rpx;
  }
  .service-list-text:first-of-type{
	  margin-left: 0rpx;
  }
  .service-list-text.active{
	  font-size: 30rpx;
	  // font-family: PingFangSC-Semibold, PingFang SC;
	  font-weight: 600;
	  color: #333333;
	  position: relative;
  }
  .service-list-text.active:after{
		content: '';
	    width: 28rpx;
	    height: 1px;
	    // display: block;
	    margin: 0 auto;
	    border-bottom: 2px solid #333;
	    padding: 1px;
		position: absolute;
		bottom: -15rpx;
		left: 0rpx;
  }
}
.service-list{
	padding: 48rpx 32rpx 0rpx 32rpx;
	.service-list-inner{
		display: flex;
		margin-top: 32rpx;
		.service-list-inner-left{
			height: 128rpx;
			image{
				width: 128rpx;
				height: 128rpx;
			}
		}
		.service-list-inner-center{
			display: flex;
			flex-direction: column;
			padding-left: 18rpx;
			flex: 1;
			width: 452rpx;

			.service-list-inner-center1{
				font-size: 26rpx;
				// font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
				-webkit-line-clamp: 1;

			}
			.service-list-inner-center2{
				font-size: 32rpx;
				// font-family: GenJyuuGothic-P-Bold, GenJyuuGothic-P;
				font-weight: bold;
				color: #FF413C;
				padding-top: 46rpx;
			}
		}
		.service-list-inner-right{
			align-self: flex-end;
			margin-left: 44rpx;
			image{
				width: 44rpx;
				height: 44rpx;
			}
		}
	}
	.service-list-inner:first-of-type{
		margin-top: 0rpx;
	}
}

.service-bottom{
	display: flex;
	position: fixed;
	bottom: 0rpx;
	background-color: #fff;
	border-top: 1rpx solid rgba(0, 0, 0, 0.05);
	width: 100vw;
	align-items: center;
	padding: 24rpx 32rpx 0rpx 32rpx;
	padding-bottom: calc(24rpx + env(safe-area-inset-bottom)/2);
	box-sizing: border-box;
	.service-bottom-left{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		flex: 1;
		display: flex;
		align-items: center;
		
		image{
			width: 44rpx;
			height: 44rpx;
		}
		.service-bottom-left-text1{
			padding-left: 8rpx;
		}
		.service-bottom-left-text2{
			color: #FF413C;
			padding: 0rpx 6rpx;
		}
	}
	.service-bottom-button{
		width: 228rpx;
		height: 80rpx;
		background: #FFD300;
		border-radius: 48rpx;
		
		font-size: 28rpx;
		// font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #111111;
		text-align: center;
		line-height: 80rpx;
	}
}

</style>
